<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-20 15:31:04
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-23 16:12:21
 * @FilePath: /shortRent-ui/src/views/risk/illegal/components/addAccount.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog :title="title" :visible.sync="visible" width="700px" @close="close">
    <div>
      <el-form :model="formData" ref="formData" :rules="rules" label-width="90px" label-position="left" :inline="false"
        size="normal">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="账号:" prop="account">
              <el-input class="editStyle" v-model="formData.account" placeholder="请输入账号" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="密码:" prop="password">
              <el-input class="editStyle" v-model="formData.password" placeholder="请输入密码" maxlength="30"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="所属平台:" prop="platform">
              <el-select class="editStyle" v-model="formData.platform" placeholder="请选择所属平台">
                <el-option label="12123平台" :value="1"></el-option>
                <el-option label="深圳交警" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0" v-if="formData.platform == 1">
            <el-form-item label="12123地区:" prop="addrCode">
              <el-select class="editStyle" v-model="formData.addrCode" filterable placeholder="请选择12123地区">
                <el-option v-for="(item) in addressList" :key="item.addrCode" :label="item.addrName"
                  :value="item.addrCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-form-item label="关联车辆所属公司:" label-width="140px" prop="orgIdList">
              <el-select style="width: 490px;" v-model="formData.orgIdList[0]" clearable filterable placeholder="请选择关联所属公司">
                <el-option v-for="(item) in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :offset="0">
            <el-form-item label="启用/禁用" prop="enableFlag">
              <el-radio-group v-model="formData.enableFlag" size="normal">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

    </div>
    <span slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confim">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as illegalApi from '@/api/car/illegal';
export default {
  data() {
    return {
      type: 0,
      illegalQueryAccountId: '',
      title: '新增账号',
      visible: false,
      companyList: [],
      addressList: [],
      formData: {
        account: '',
        password: '',
        platform: 1,
        addrCode: '',
        enableFlag: 1,
        orgIdList: []
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'change' }

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        platform: [
          { required: true, message: '请选择所属平台', trigger: 'change' }
        ],
        orgIdList: [
          { type: 'array', message: '请选择关联车辆所属公司', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getCompanyList();
    this.getIllegalAcountAddressList();
  },
  methods: {
    //获取所属公司列表
    getCompanyList() {
      illegalApi.illegalAcountOrgList().then(res => {
        this.companyList = res.data;
      })
    },
    // 违章查询地区编码集合
    getIllegalAcountAddressList() {
      illegalApi.illegalAcountAddressList().then(res => {
        this.addressList = res.data;
      })
    },
    // 确定按钮
    confim() {
      this.$refs.formData.validate((valid) => {
        if (valid) {

          if(this.formData.platform===2){
            this.formData.addrCode = null;
          }

          if (this.type == 1) {//编辑
            this.$confirm('确认修改违章查询账号吗?', '提示', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
            }).then(() => {
              illegalApi.upDateIllegalAcount(this.formData).then(res => {
                if (res.code == 200) {
                  this.close();
                  this.$emit('success');
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  });
                }
              })
            })
          } else {//新增
            this.$confirm('确认添加违章查询账号吗?', '提示', {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
            }).then(() => {
              illegalApi.illegalAcountCreate(this.formData).then(res => {
                if (res.code == 200) {
                  this.close();
                  this.$emit('success');
                  this.$message({
                    type: 'success',
                    message: '添加成功'
                  });
                }
              })
            })
          }

        }
      });
    },
    /**
     * 显示弹框
     * @param {0:新增 1:编辑} type
     * @param {编辑回显的账号id} illegalQueryAccountId
     */
    show(type, illegalQueryAccountId) {
      this.type = type;
      // 延时处理重置数据,防止数据污染
      this.$nextTick(() => {
        this.$refs.formData.resetFields();
      })
      if (type == 1) {//编辑
        this.title = '编辑账号';
        this.illegalQueryAccountId = illegalQueryAccountId;
        // 获取回显数据
        illegalApi.illegalAcountDetail(illegalQueryAccountId).then(res => {
          this.formData = res.data;
        })
      }
      this.visible = true;

    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style lang="scss">
.editStyle {
  width: 200px;
}
</style>
